<!--
 * @description: 
 * @Date: 2022-11-04 16:09:03
 * @LastEditTime: 2022-12-05 13:05:07
-->
<template>
  <div class="onlinemall">
    <div class="absolute -top-6"></div>
    <div class="linkscroll">
      <div class="componentVue grid grid-cols-2 mt-1">
        <div v-for="i in List">
          <div class="p-3 rounded-lg flex componentVue-iconsBox">
            <div class="flex-shrink-0 rounded-lg componentVue-icons">
              <component :is="i.components"></component>
            </div>
            <div class="flex flex-col ml-2 w-full">
              <div class="text-base w-full flex">
                <span>
                  {{ i.name }}
                </span>
                <img
                  style="width: 20px; height: 20px"
                  class="ml-auto cursor-pointer"
                  src="@/assets/svg/addIcon.svg"
                  @click="add(i.data)"
                />
              </div>
              <span class="text-xs mt-2">{{ i.tips }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { markRaw } from "vue";
import { useStore } from "vuex";
import appComponent from "../../plugin";
const store = useStore();
const List = markRaw([
  {
    name: "热搜榜",
    tips: "百度实时热搜榜单",
    components: appComponent["hotSearch"],
    data: {
      id: 1,
      size: "2x4",
      component: "hotSearch",
      name: "热搜榜",
      type: "component",
      url: "hotSearch",
    },
  },
  {
    name: "天气",
    tips: "所在地实时天气",
    components: appComponent["weather"],
    data: {
      id: 2,
      size: "2x4",
      component: "weather",
      name: "天气",
      type: "component",
      url: "weather",
    },
  },
  {
    name: "备忘录",
    tips: "快捷记录您的时事",
    components: appComponent["note"],
    data: {
      id: 3,
      size: "2x4",
      component: "note",
      name: "备忘录",
      type: "component",
      url: "note",
    },
  },
  // {
  //   name: '创建分组',
  //   tips: '标签分组组件',
  //   components: appComponent['iconGroup'],
  //   data: {
  //     id: 4,
  //     size: '2x4',
  //     component: 'iconGroup',
  //     name: '创建分组',
  //     type: 'component',
  //     url: 'iconGroup'
  //   }
  // }
]);
const add = (item) => {
  const data = store.getters.find(item.id);
  if (data) {
    return false;
  } else {
    store.state.link.push(item);
    store.commit("updateLink");
  }
};
</script>
<style lang="less">
.onlinemall {
  position: relative;
  width: 100%;
  height: 100%;
}

.iconSearch {
  > .el-input__wrapper {
    border-radius: 30px;
  }
}

.linkscroll {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 50px);
}

.componentVue {
  grid-gap: 20px;
  > div {
    border-radius: 8px;
    > .links {
      display: flex;

      > .linklogo {
        flex-shrink: 0;
        border-radius: 15px;
        width: 50px;
        height: 50px;
        display: block;
      }

      > .linkTips {
        margin-left: 10px;
        display: flex;

        > div {
          text-overflow: ellipsis;
          height: 32px;
          overflow: hidden;
        }

        flex-direction: column;
      }
    }
  }
}
.componentVue-icons {
  width: 50px;
  height: 50px;
  border-radius: var(--iconRadius);
  overflow: hidden;
}
.componentVue-iconsBox {
  background: rgba(234, 234, 234, 0.699);
}
</style>
